<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="线边仓编号" prop="storehouseCode">
            {{ form.storehouseCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="线边仓名称" prop="storehouseName">
            {{ form.storehouseName }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopName">
            {{ form.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="lineName">
            {{ form.lineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="leaderName">
            {{ form.leaderName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建仓日期" prop="buildDate">
            {{ form.buildDate }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <dict-tag :options="sys_use_status" :value="form.status" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注" prop="remark">
            {{ form.remark }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-if="binPermi || matPermi || proPermi" v-model="activeName" class="demo-tabs">
      <el-tab-pane v-if="binPermi" label="库位管理" name="bin">
        <StoreBin :code="storehouseCode" />
      </el-tab-pane>
      <el-tab-pane v-if="matPermi" label="物料库存" name="mat">
        <matTable :columns="matColumn" type="mat" :code="storehouseCode"></matTable>
      </el-tab-pane>
      <el-tab-pane v-if="proPermi" label="产品库存" name="prod">
        <matTable :columns="prodColumn" type="prod" :code="storehouseCode"></matTable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Data">
import { getStorehouse } from "@/api/storehouse/storehouse";
import StoreBin from "../storehouseBin/index";
import { ref, reactive, computed, useAttrs, toRefs, onMounted, getCurrentInstance } from "vue";
import { checkPermi } from "@/utils/permission";
const { proxy } = getCurrentInstance();
const { sys_use_status } = proxy.useDict("sys_use_status");
import matTable from "./matTable.vue";
import { matColumn, prodColumn } from "./column";
const attrs = useAttrs();
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
  },
});
const activeName = ref("bin");
const storehouseCode = ref("");
const formRef = ref(null);
const { form } = toRefs(data);
function getDetail(id) {
  reset();
  getStorehouse(id).then((res) => {
    form.value = res.data;
  });
}

const binPermi = computed(() => {
  return checkPermi(["storehouse:storehouseBin:list"]);
});
const matPermi = computed(() => {
  return checkPermi(["warehouse:stock:list"]);
});
const proPermi = computed(() => {
  return checkPermi(["warehouse:stock:list"]);
});

function getActive() {
  if (binPermi.value) {
    activeName.value = "bin";
    return;
  }
  if (matPermi.value) {
    activeName.value = "mat";
    return;
  }
  if (proPermi.value) {
    activeName.value = "pro";
    return;
  }
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    type: undefined,
    equipNo: undefined,
    model: undefined,
    factory: undefined,
    segmentCode: undefined,
    workshopCode: undefined,
    status: undefined,
    remark: undefined,
  };
  formRef.value.resetFields();
}
onMounted(() => {
  const { data } = attrs;
  storehouseCode.value = data.storehouseCode;
  getDetail(data.id);
  getActive();
});
</script>
